<template class="">
    <div class="wrap amway-list">
        <div class="wrap-header font-normal">
            文章所属：
            <el-select v-model="type" filterable placeholder="请选择" size="mini ">
                <el-option
                    v-for="item in options"
                    :key="item.idolId"
                    :label="item.name"
                    :value="item.idolId">
                </el-option>
            </el-select>
        </div>

        <div class="wrap-cont">
            <div class="wrap-cont-cover">
                <div class="card">
                    <div v-for="item in amwayList" class="card-item" @click="toAmway(item.shareProductionId)">
                        <img
                            :src="baseURL+item.images">
                        <div class="clearfix card-font">{{item.title}} <i class="el-icon-star-on primary ml8">{{item.likeCount}}</i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import ContentView from '@/components/main/content.component'
    import {baseURL} from "../../utils/axios";

    export default {
        name: "list",
        data() {
            return {
                options: [],
                type: '',
                baseURL: baseURL,
                amwayList: []
            }
        },
        components: {
            ContentView
        },
        methods: {
            toAmway(id) {
                this.$router.push({name: 'amwayDetail', query: {id: id}})
            },
            getIdolList() {
                this.$api.idol.idolList({
                    "pageNum": 1,
                    "pageSize": 100,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    res.data.list.forEach(item => {
                        if (item.userIdolStatus) {
                            this.options.push(item)
                        }
                    })
                })
            },
            getAmwayList() {
                let body = this.type ? {
                    idolId: this.type,
                    pageNum: 1,
                    pageSize: 100
                } : {
                    pageNum: 1,
                    pageSize: 100
                };
                this.$api.amway.getAmwayList(body).then(res => {
                    this.amwayList = res.data.list;
                })
            }
        },
        mounted() {
            this.getIdolList();
            this.getAmwayList();
        },
        watch: {
            'type'(val) {
                if (val) {
                    this.getAmwayList()
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .amway-list {
        .primary {
            color: $text-color-primary;
            font-size: 12px;
        }

        .bottom {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }

        .card {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            &-item {
                margin: 4px;
                border-radius: 4px;
                border: 1px solid #ebeef5;
                background-color: #fff;
                overflow: hidden;
                color: #303133;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                padding-left: 6px;
                padding-right: 6px;
                width: 18%;
                text-align: center;
                cursor: pointer;
            }

            &-font {
                font-size: 10px;
            }
            img {
                height: 140px;
            }
        }

    }

</style>
